import React from 'react';
import './PetDisplay.css';

// 宠物显示组件
const PetDisplay = ({ petState }) => {
  const { type, stage, isSleeping, isIll } = petState;
  
  // 根据宠物类型和成长阶段获取对应的图片
  const getPetImage = () => {
    // 根据宠物类型返回对应的emoji
    const petEmojis = {
      cat: '🐱',
      dog: '🐶',
      rabbit: '🐰',
      hamster: '🐹'
    };
    
    // 根据成长阶段调整大小
    const stageStyles = {
      baby: { fontSize: '80px' },
      young: { fontSize: '100px' },
      adult: { fontSize: '120px' },
      elder: { fontSize: '110px', filter: 'grayscale(30%)' }
    };
    
    return (
      <div style={stageStyles[stage] || {}}>
        {petEmojis[type] || '🐱'}
      </div>
    );
  };
  
  // 获取宠物状态的CSS类名
  const getPetStateClass = () => {
    let className = 'pet-image';
    if (isSleeping) className += ' sleeping';
    if (isIll) className += ' ill';
    return className;
  };
  
  // 获取宠物环境元素
  const getEnvironmentElements = () => {
    const elements = [];
    
    // 根据宠物类型添加不同的环境元素
    switch(type) {
      case 'cat':
        elements.push(<div key="yarn" className="env-element yarn">🧶</div>);
        break;
      case 'dog':
        elements.push(<div key="bone" className="env-element bone">🦴</div>);
        break;
      case 'rabbit':
        elements.push(<div key="carrot" className="env-element carrot">🥕</div>);
        break;
      case 'hamster':
        elements.push(<div key="seed" className="env-element seed">🌰</div>);
        break;
      default:
        break;
    }
    
    // 根据成长阶段添加不同的装饰
    switch(stage) {
      case 'baby':
        elements.push(<div key="baby" className="env-element baby-toy">🍼</div>);
        break;
      case 'young':
        elements.push(<div key="young" className="env-element young-toy">🎾</div>);
        break;
      case 'adult':
        elements.push(<div key="adult" className="env-element adult-item">👑</div>);
        break;
      case 'elder':
        elements.push(<div key="elder" className="env-element elder-item">👓</div>);
        break;
      default:
        break;
    }
    
    return elements;
  };
  
  return (
    <div className="pet-display">
      <div className={getPetStateClass()}>
        {getPetImage()}
        {isSleeping && <div className="sleep-bubble">💤</div>}
        {isIll && <div className="ill-sign">🤒</div>}
      </div>
      <div className="pet-environment">
        {getEnvironmentElements()}
      </div>
    </div>
  );
};

export default PetDisplay;